<template xmlns:v-on="http://www.w3.org/1999/xhtml">
  <div>
    <ddnav></ddnav>
    <div class="dd-body"></div>
    <div class="demo-grid">
      <mu-row gutter v-show="!resultShow">
        <mu-col width="100" tablet="100" desktop="100">
        <div style="margin: 0 auto;text-align:center">
          <mu-circular-progress :size="100" color="red"></mu-circular-progress>
        </div>
        </mu-col>
      </mu-row>
      <mu-row gutter v-show="resultShow">
        <mu-col width="33" tablet="20" desktop="15" v-for="item in list" :key="item.id">
          <mu-card v-on:click="doViewDetail(item.id)">
            <mu-card-media v-on:click="doViewDetail(item.id)" v-bind:title="item.title"
                           v-bind:subTitle="scoreHandler(item.score)" subTitleClass="media-score">
              <img :src="item.picUrl" v-on:click="doViewDetail(item.id)"></img>
            </mu-card-media>
          </mu-card>
        </mu-col>
        <mu-infinite-scroll :scroller="scroller" :loading="loading" @load="loadMore"></mu-infinite-scroll>
      </mu-row>
    </div>
  </div>
</template>

<script>
  import {configs} from '../assets/js/config.js'
  import ddnav from './header/Header'
  export default {
    data () {
      const list = []
      return {
        list,
        num: 10,
        page: 1,
        size: 30,
        scroller: null,
        loading: false,
        resultShow: false
      }
    },
    mounted () {
      let that = this
      this.scroller = this.$refs.abd
      this.$http.jsonp('http://' + configs.domain + '/api/video/list/1?page=' + this.page + '&size=' + this.size + '&_=' + new Date().getTime())
        .then(function (response) {
          that.list = response.body.content
          that.totalPages = response.body.totalPages
          that.resultShow = true
        })
        .catch(function (response) {
          console.log(response)
          that.resultShow = false
        })
    },
    methods: {
      scoreHandler: function (score) {
        return '评分：' + parseInt(score)
      },
      doViewDetail: function (id) {
        console.log(id)
        this.$router.push({path: '/detail/' + id})
      },
      loadMore () {
        let that = this
        that.page = that.page + 1
        if (that.page > that.totalPages) {
          return false
        }
        that.loading = true
        that.$http.jsonp('http://' + configs.domain + '/api/video/list/1?page=' + this.page + '&size=' + this.size + '&_=' + new Date().getTime())
          .then(function (response) {
            for (let i = 0; i < response.body.content.length; i++) {
              that.list.push(response.body.content[i])
            }
            that.totalPages = response.body.totalPages
            that.loading = false
          })
          .catch(function (response) {
            console.log(response)
            that.loading = false
          })
      }
    },
    components: {ddnav}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1,
  h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>

